<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-02 21:38:44
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-05 08:57:21
-->
<template>
    <Banner :banner="banner"></Banner>
    <div class="live" v-if="sports.length">
        <h1>乐享生活100</h1>
        <div class="live-list">
            <div class="card" v-for="item, index in 10" :key="index">
                <img :src="sports[index].menuThumbnail" />
                <h3>{{ sports[index].displayName }}</h3>
            </div>
        </div>
        <a-button type="primary" size="large" @click="router.push('/product/1')">立即体检</a-button>
    </div>
</template>
<script setup>
import * as api from '@ap'
import { ref } from "vue"
import { useRouter } from "vue-router"
import Banner from './Banner.vue'
let result = await api.getHomePage()
const banner = ref(result.banner)
const sports = ref(result.sports)
const router = useRouter()
</script>
<style scoped lang="less">
.live {
    margin: 40px auto;
    min-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    .live-list {
        display: flex;
        min-width: 1200px;
        flex-wrap: wrap;
        flex-direction: row;
        .card {
            width: 200px;
            height: 73px;
            display: flex;
            background-color: #fff;
            border-radius: 8px 8px 25px 8px;
            margin: 30px;
            box-shadow: 5px 5px 5px #ccc;
            align-items: center;
            position: relative;
            .h1 {
                font-size: 30px;
            }
            img {
                // position: absolute;
                width: 80px;
                height: 80px;
                margin-left: -15px;
                margin-top: -15px;
            }
            h3 {
                font-size: 23px;
                font-weight: 900;
            }
        }
    }
}
</style>